<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>simple</title>
    </head>
    <body>
        <div class="visible-area">
            <div class="content">
                <div class="item item1"></div>
                <div class="item item2"></div>
                <div class="item item3"></div>
            </div>
        </div>
      
        <style>
            .visible-area{
                width: 200px;
                height: 80px;
                border: solid 2px red;
                overflow: hidden;
            }
            .content{
                width: 600px;
                display: flex;
                /* 核心属性 随时间变化 关键帧属性 */
                /* transform: translate(0); */
                animation: translate-pic 5s infinite;
            }
            @keyframes translate-pic {
                0% ,20%{
                    transform: translate(0);
                }
                40%,60%{
                    transform: translate(-200px);
                }
                80%,100%{
                    transform: translate(-400px);
                }
            }

            .item{
                width: 200px;
                height: 80px;
            }
            .item1{
                /* background-color: chocolate; */
                background-image: url("filtertestss.png");
                background-size: contain;
            }
            .item2{
                background-image: url("filtertestss.png");
                background-size: cover;
            }
            .item3{
                background-image: url("filtertestss.png");
                background-size: 50%;
            }
        </style>
    </body>
</html>